<template>
  <el-col v-if="item.display" :span="span" class="sea-card">
    <el-button :class="item.checked ? 'sea-btn-checked': 'sea-btn-default'" @click="click">
      <span :class="item.checked ? 'sea-header-checked':'sea-header-default'">
        <i v-if="item.checked" class="fa fa-user"></i>
        <i v-if="!item.checked" class="fa fa-user-times"></i>
      </span>
      <article>
        <p> {{ item.username }} </p>
        <p> {{ item.account || '无部门' }} </p>
      </article>
    </el-button>
  </el-col>
</template>

<script>
/* eslint-disable */
/**
 * 用户面板
 */
export default {
    name: "UserItem"
    , props: {
        // 每一个用户面板所占用的栈格
        span: {type: Number},
        // 表单组件列表
        item: {type: Object},
        // 序号
        index: {type: Number},
        // 节点选中事件
        onchange: {type: Function}
    }
    , data() {
        return {
            // 受否选中
            checked: true
        }
    }
    , methods: {
        /**
         * 元素点击事件
         */
        click: function () {
            this.onchange(this.item, this.index);
        }
    }
}
</script>
<style scoped>

/* 去除莫名其妙的边框设计 */
p, span, strong {
    margin: 2px;
    font-size: smaller;
}

.sea-btn-checked {
    color: #46a6ff;
    width: 100%;
    font-weight: bold;
    border: 1px solid #46a6ff;
    padding: 5px
}

.sea-btn-default {
    color: lightgray;
    width: 100%;
    border: 1px solid lightgray;
    padding: 5px
}

.sea-btn-default:focus {
    color: lightgray;
    width: 100%;
    border: 1px solid lightgray;
    padding: 5px
}

.sea-header-checked {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background-color: #46a6ff;
    color: #FFFFFF;
    border-radius: 50%;
}

.sea-header-default {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background-color: lightgray;
    color: #FFFFFF;
    border-radius: 50%;
}
</style>